<template id="dashboard-rateCard">
	<!-- 各种率的卡片 -->
	<div>
		<v-row>
			<v-col>
				<v-card class="pr-2" flat>
					<v-row justify="space-around" dense>
						<v-col cols="auto" v-for="(item,index) in rateConditions" key="index">
                            <v-card-text class="pb-1">
                                {{item.title}}
                            </v-card-text>
                            <v-card-text>
                                <span :class="item.className">{{item.value *100}}</span><span>%</span>
                               </v-card-text>
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>
<script type="module">
	Vue.component("dashboard-rateCard", {
		template: "#dashboard-rateCard",
		props: {},
		data: () => ({
			rateConditions: [
				{
					title: "出租率",
                    key:"rentRate",
					value: "0",
                    className:"green--text text--lighten-1 display-1 pa-1 pl-4"
				},
				{
					title: "违章率",
                    key:"violationRate",
					value: "0",
                    className:"yellow--text  text--lighten-1 display-1 pa-1 pl-4"
				},
				{
					title: "维修率",
                    key:"repairRate",
					value: "0",
                    className:"orange--text text--lighten-1 display-1 pa-1 pl-4"
				},
				{
					title: "报废率",
                    key:"scrapRate",
					value: "0",
                    className:"red--text text--lighten-1 display-1 pa-1 pl-4"
				},
			],
		}),
		computed: {},
		watch: {},
		async created() {},
		async mounted() {},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
                    case "fetchRateConditionData":
                        this.fetchRateConditionData(uiActionData)
                        break;
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},
            // 赋值rateConditionData
            fetchRateConditionData(data){
                this.rateConditions =  this.rateConditions.map(item => {
                    item.value = data[item.key] || 0
                    return item
                })
            }
		},
	});
</script>
